<template>
  <div id="login" v-if="isShow">
    <div class="title">
      手 机 号 登 录<i class="icon-guanbi" @click="close"></i>
    </div>
    <div class="content">
      <el-input placeholder="请输入手机号" v-model="account" clearable>
      </el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
      <el-button
        type="primary"
        v-if="account.length && password.length"
        @click="login"
        >登录</el-button
      >
      <el-button
        type="primary"
        v-if="!account.length || !password.length"
        disabled
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Login",
  props: ["isShowLogin", "changestate"],
  data() {
    return {
      account: "",
      password: "",
    };
  },
  computed:{
    isShow(){
      return this.isShowLogin
    }
  },
  methods: {
    //关闭登录框,登录框是header的组件，需要通知header显示或关闭
    close() {
      this.changestate();
    },
    login() {
      axios
        .post(
          "http://localhost:8013/api/login/cellphone?phone=" +
            this.account +
            "&password=" +
            this.password
        )
        .then(
          (res) => {
            console.log(res);
            if (res.data.code === 400) {
              // alert("请检查账号！！");
              this.open2();
            }
            if (res.data.code === 502) {
              // alert("密码错误");
              this.open4();
            }
            if (res.data.code === 200) {
              // alert("登录成功");
              // console.log(res);
     
              //提示成功信息
              this.open1();

              //关闭当前对话框
              this.close();
              
              //本地存储
              let data = { account: this.account, password: this.password, id:res.data.account.id };
              localStorage.setItem("user", JSON.stringify(data));

              //数据传给vuex
              this.$store.commit("userAbout/UPDATEUSERINFO",{
                isLogin: true,
                id:res.data.account.id,   //用户id
                avatarUrl: res.data.profile.avatarUrl,   //用户头像
                nickname: res.data.profile.nickname,   //用户昵称
              })

              //刷新页面
              // this.$router.go(0);

              //触发侧边栏的自定义事件
              this.$bus.$emit("updateAside")
             
            }
          },
        )
        .catch(() => {
          console.log("登录异常");
          this.open3();
        });
    },

    open1() {
      this.$notify({
        title: "登录成功",
        message: "欢迎使用网易云音乐",
        type: "success",
        duration: "1500",
      });
    },

    open2() {
      this.$notify({
        title: "警告",
        message: "请检查您的账号是否正确",
        type: "warning",
        duration: "1500",
      });
    },

    open3() {
      this.$notify({
        title: "提示",
        message: "登陆异常",
        type: "warning",
        duration: "1500",
      });
    },

    open4() {
      this.$notify.error({
        title: "错误",
        message: "密码错误",
        duration: "1500",
      });
    },
  },
};
</script>

<style scoped>
#login {
  width: 470px;
  height: 280px;
  position: fixed;
  background: #fcfcfc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 10px rgb(146, 100, 109);
  line-height: 67px;
  text-align: center;
}

#login .title {
  width: 100%;
  height: 60px;
  background: rgb(159, 179, 236);
  font-size: 18px;
  color: rgb(66, 66, 66);
  margin-bottom: 20px;
  position: relative;
}

#login .title i {
  position: absolute;
  top: -5px;
  right: 10px;
  cursor: pointer;
}
.content {
  display: flex;
  flex-direction: column;
  width: 60%;
  margin: auto;
}
.content input {
  width: 250px;
  height: 30px;
  margin: 10px auto;
}
</style>